<script lang="ts" setup>
import { QuestionOptionNo, QuestionOptionState } from "@/types/practice";

const props = defineProps<{
  option: QuestionOptionNo;
  text: string;
  state?: QuestionOptionState;
}>();

const iconTextMap: Record<QuestionOptionState, string | null> = {
  correct: "✓",
  wrong: "X",
  choosed: null,
  empty: null,
};

const iconText = computed(() => {
  if (props.state === "empty" || props.state === "choosed") {
    return props.option;
  } else {
    return iconTextMap[props.state || "empty"];
  }
});
</script>

<template>
  <div class="flex items-center gap-4">
    <div
      class="w-9 h-9 shrink-0 flex items-center justify-center text-sm rd-full b-1 b-solid b-gray-3"
      :class="{
        'bg-white c-gray-7': props.state === 'empty',
        'bg-gray-4 c-white': props.state === 'choosed',
        'bg-emerald-5 c-white': props.state === 'correct',
        'bg-red-5 c-white': props.state === 'wrong',
      }"
    >
      {{ iconText }}
    </div>
    <div class="">{{ props.text }}</div>
  </div>
</template>
